<template>
  <d2-container>
    <el-form ref="form" :model="formData" label-width="160px" style="width:800px;margin-top:40px">
      <el-form-item label="">
        <el-alert :title="yutitle" type="success" :closable="false"></el-alert>
      </el-form-item>
      <el-form-item label="用户APP收入ID：" prop="app_inid">
        <el-input v-model="formData.app_inid" placeholder="请输入用户APP收入ID" />
      </el-form-item>
      <el-form-item label="APP提现地址：" prop="app_cashurl">
        <el-input v-model="formData.app_cashurl" placeholder="请输入APP提现地址" />
      </el-form-item>
      <el-form-item label="微信企业付款检测：">
        <el-button v-if="formData.pay_check === 0" type="primary" @click="cesbtn">点击测试</el-button>
        <el-button v-else :disabled="true" type="primary">已通过检测</el-button>
      </el-form-item>
    <el-form-item>
      <el-button type="primary" :loading="serveLoading" @click="onSubmit">保存</el-button>
    </el-form-item>
    </el-form>
    <el-dialog title="企业微信付款测试" :visible.sync="dialogVisible"  width="40%" :before-close="handleClose">
      <el-form ref="form" :model="cesData" :rules="rules" label-width="120px" >
        <el-form-item label="用户UID：" prop="uid">
          <el-input v-model="cesData.uid" placeholder="请输入用户UID" />
        </el-form-item>
        <el-form-item label="付款金额：" prop="money">
          <el-input-number v-model="cesData.money" :min="0.3" :max="1" :step="0.1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="surebtn">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import { GetList, editConfig, appWxPayTest } from '@/api/winner' // 查询添加修改删除的http请求接口
export default {
  name: 'classify',
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  data () {
    return {
      tableData: [],
      dialogVisible: false,
      submitLoading: false,
      serveLoading: false,
      yutitle:'',
      cesData: {
        uid: '',
        money: ''
      },
      formData: {
        app_inid: '',
        app_cashurl: ''
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      GetList().then(res => {
        const { voice_num_all, voice_num_resum} = res
        this.formData = res
        if (voice_num_resum <= 1000) {
          this.yutitle = '当前语音识别总条数'+ voice_num_all+'条，剩余'+ voice_num_resum+'条，' + '余量不足请联系客服充值。'
        } else {
          this.yutitle = '当前语音识别总条数'+ voice_num_all+'条，剩余'+ voice_num_resum+'条，' + '余量充足。'
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    onSubmit () {
      const { formData } = this
      this.serveLoading = true
      editConfig({ ...formData }).then(res => {
        this._getTableData()
      }).finally(() => {
        this.serveLoading = false
      })
    },
    resetForm () {
      this.$refs.form.resetFields()
    },
    cesbtn () {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    surebtn () {
      const { cesData } = this
      this.submitLoading = true
      appWxPayTest({ ...cesData }).then(res => {
        this.dialogVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>
<style>
.el-input {
    margin-right: 10px;
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100% !important;
}
</style>
